<template>
  <!-- 查询顶栏 -->
  <a-collapse v-model:activeKey="activeKey" ghost>
    <a-collapse-panel header="高级搜索">
      <a-form layout="inline" :model="query" style="margin-bottom: 5px">
        <a-form-item style="width: 150px">
          <a-input v-model:value="query.u_id">
            <template #prefix>ID:</template>
          </a-input>
        </a-form-item>

        <a-form-item style="width: 150px">
          <a-input v-model:value="query.u_name">
            <template #prefix>用户名:</template>
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-select v-model:value="query.u_status">
            <a-select-option value="">不限状态</a-select-option>
            <a-select-option value="-1">已封禁</a-select-option>
            <a-select-option value="1">正常</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-select v-model:value="query.u_sex" style="width: 150px">
            <a-select-option value="">不限性别</a-select-option>
            <a-select-option value="1">男</a-select-option>
            <a-select-option value="2">女</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="出生日期：">
          <a-date-picker
            v-model:value="query.u_birth_start"
            placeholder="开始日期"
            valueFormat="YYYY-MM-DD"
          />
          至
          <a-date-picker
            v-model:value="query.u_birth_end"
            placeholder="结束日期"
            valueFormat="YYYY-MM-DD"
          />
        </a-form-item>

        <a-form-item>
          <a-button @click="getPage(1)" type="primary"
            ><template #icon><SearchOutlined /></template>查询</a-button
          >
        </a-form-item>
      </a-form>
    </a-collapse-panel>
  </a-collapse>

  <!-- 查询得到的用户数据表 -->
  <a-table
    :columns="columns"
    :dataSource="page.list"
    :pagination="pagination"
    @change="handleTableChange"
    :row-selection="rowSelection"
    :row-key="(record) => record.u_id"
  >
    <template #u_sex="{ text }">
      {{ text === 1 ? "男" : text === 2 ? "女" : "未填" }}
    </template>

    <template #u_status="{ text }">
      {{ text === -1 ? "封禁中" : "正常" }}
    </template>
    <template #action="{ record }">
      <span>
        <a-button type="link" @click="onClickTab(record)"> 标签 </a-button>
        <a-popconfirm
          title="确定要启用？"
          +
          record.u_name
          v-if="record.u_status === -1"
          @confirm="onClickEnable(record.u_id)"
        >
          <a-button type="link">启用</a-button>
        </a-popconfirm>
        <a-popconfirm
          title="确定要封禁？"
          +
          record.u_name
          v-if="record.u_status != -1"
          @confirm="onClickDisable(record.u_id)"
        >
          <a-button type="link">封禁</a-button>
        </a-popconfirm>
      </span>
    </template>
  </a-table>

  <user-tab ref="UserTabRef"></user-tab>
</template>

<script setup>
import { ref, reactive, createVNode } from "vue";
import { get, post, tip } from "@/common";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import UserTab from "./userTabs.vue";
import { useRouter } from "vue-router";

const router = useRouter();

const UserTabRef = ref();
const columns = [
  {
    dataIndex: "u_id",
    title: "ID",
  },
  {
    dataIndex: "u_name",
    title: "用户名",
  },
  {
    dataIndex: "u_sex",
    title: "性别",
    slots: {
      customRender: "u_sex",
    },
  },
  {
    dataIndex: "u_birth",
    title: "生日",
  },
  {
    dataIndex: "u_tel",
    title: "电话",
  },
  {
    dataIndex: "u_status",
    title: "状态",
    slots: {
      customRender: "u_status",
    },
  },
  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action",
    },
  },
];

const query = reactive({
  u_id: "",
  u_name: "",
  u_status: "",
  u_birth_start: "",
  u_birth_end: "",
});

const page = ref({});

const pagination = reactive({
  current: 1, //当前页
  pageSize: 10, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["5", "10", "20", "50", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get("/buser/usermanage/queryUserList", query).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;
  });
};

getPage(1); // 页面加载时获取第一页数据

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

const onClickEnable = (u_id) => {
  post("/buser/usermanage/permit?u_id=" + u_id).then((res) => {
    getPage(page.value.current);
    tip.success("启用成功");
  });
};

const onClickDisable = (u_id) => {
  post("/buser/usermanage/ban?u_id=" + u_id).then((res) => {
    getPage(page.value.current);
    tip.success("封禁成功");
  });
};

const onClickTab = (uObj) => {
  UserTabRef.value.open(uObj);
};
</script>
